<template>
	<div>
		<div class="invoice_warp" style="margin-top: 0;">
			<div class="weui-cells weui-cells_form">
				<form method="post" id="form" action="##" enctype="multipart/form-data">
					<div class="weui-cell" style="padding: 0;">
						<div class="weui-cell__bd">
							<div class="weui-uploader__bd">
								<ul class="weui-uploader__files">
									<li class="weui-uploader__file" style="overflow: hidden;" v-for='(item,index) in liFiles' :key=index>
										<img :src="item" alt="" class="baseImg">
										<img src="../../images/delete.png" alt="" class="delete" @click="deleteClick(index)">
									</li>
								</ul>
								<div class="weui-uploader__input-box">
									<input id="uploaderInput" name="offerSheetFile" class="weui-uploader__input js_file" type="file" accept="image/*"
									 @change="changeClick()" >
								</div>
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		Dialog
	} from 'we-vue';
	
	export default {
		data() {
			return {
				multiple: false,
				liFiles: [],
				singleUpload:true
			}
		},
		methods: {
			changeClick(item) {
				let files = document.querySelector("#uploaderInput").files	
				let form = new FormData()
				for (let i = 0; i < files.length; i++) {
					let reader = new FileReader()
					reader.readAsDataURL(files[i])
					reader.onload = (e) => {
						this.liFiles.push(e.target.result) 
					}
				}
				form.append('offerSheetFile',document.querySelector("#uploaderInput").files[0])
				this.$emit('getChild',form)
			},
			deleteClick(index) {
				Dialog.confirm({
					title: '提示',
					message: '确认删除这张图片么？',
					showCancelButton: true
				}).then(() => {
					this.$emit('getChild',this.formData)
					this.liFiles.splice(index)
				})
			}
		}

	}
</script>

<style>
</style>
